<template>
  <div class="logo-container" style="overflow: hidden">
    <div
      class="logo"
      style="
        -webkit-transform: scale(3);
        -ms-transform: scale(3);
        transform: scale(3);
        height: 660px;
        z-index: -1;
      "
    >
      <ul class="cube-inner">
        <li class="front"></li>
        <li class="back"></li>
        <li class="right"></li>
        <li class="left"></li>
        <li class="top"></li>
        <li class="bottom"></li>
      </ul>
      <ul class="cube">
        <li class="front"></li>
        <li class="back"></li>
        <li class="right"></li>
        <li class="left"></li>
        <li class="top"></li>
        <li class="bottom"></li>
        <li class="floor"></li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name:"Cube"
};
</script>

<style scoped>
@import url(//fonts.googleapis.com/css?family=Averia+Sans+Libre:400,700,400italic,700italic|Ubuntu+Mono:400,700|Kreon:400,700);
@keyframes slowspin {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  10%,
  to {
    transform: rotateX(-33.5deg) rotateY(225deg);
  }
}
@keyframes fastspin {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  10%,
  to {
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

code,
pre {
  color: #333;
  background-color: #f5f5f5;
  border-radius: 4px;
}
code {
  padding: 2px 4px;
  font-size: 90%;
  white-space: nowrap;
}
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  word-break: break-all;
  word-wrap: break-word;
  border: 1px solid #ccc;
}
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}
code {
  font-family: Ubuntu Mono, Courier New, monospace;
}
strong {
  font-weight: 700;
}
.pull-right {
  float: right !important;
}
.table {
  border: 1px solid #ddd;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th {
  border-bottom-width: 2px;
  border-bottom: 2px solid #ddd;
  font-weight: 700;
}
.table > tbody > tr > td,
.table > thead > tr > th {
  border: 1px solid #ddd;
  vertical-align: bottom;
  padding: 8px;
  border-top: 0;
}
.table > tbody > tr:nth-child(odd) > td,
blockquote {
  background-color: #f9f9f9;
}
blockquote {
  padding: 5px 20px;
  margin: 0.5em 0 1em;
  border-left: 5px solid #ddd;
  font-style: italic;
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
}
.panel.panel-add {
  border-color: #d6e9c6;
  background-color: #dff0d8;
  color: #468847;
}
.panel.panel-update {
  border-color: #bce8f1;
  background-color: #d9edf7;
  color: #3a87ad;
}
.panel > pre {
  margin: 0;
}
.panel > .panel-title {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1pc;
}
p > img {
  max-width: 100%;
}
.announcement {
  text-align: center;
}
.announcement .announcement-inner {
  display: inline-block;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 4px 10px 3px;
  font-weight: 700;
  background: #f9f9f9;
}
.announcement .announcement-inner em {
  font-weight: 400;
  font-style: italic;
  font-size: 70%;
}
@media (min-width: 992px) {
  .row {
    display: -ms-flexbox;
    display: flex;
  }
  .row .col-md-3,
  .row .col-md-6,
  .row .col-md-9,
  .row .col-md-12 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .row .col-md-3 {
    -ms-flex: 3;
    flex: 3;
    min-width: 0;
  }
  .row .col-md-6 {
    -ms-flex: 6;
    flex: 6;
    min-width: 0;
  }
  .row .col-md-9 {
    -ms-flex: 9;
    flex: 9;
    min-width: 0;
  }
  .row .col-md-12 {
    -ms-flex: 12;
    flex: 12;
    min-width: 0;
  }
}
.nav {
  background-color: #eee;
}
.sidebar {
  font-size: 0.8em;
}
.sidebar h1 {
  font-size: 18pt;
}
.sidebar ul {
  margin: 0;
  padding: 0;
}
.sidebar ul li {
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 1em;
  list-style: none;
  color: #333;
}
.sidebar ul li ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
}
.sidebar ul li ul li {
  margin: 0;
  padding: 0.5em 0 0 1em;
  text-transform: none;
  border: none;
  color: #000;
  font-size: 1.2em;
}
.sidebar ul li ul li li {
  font-size: 1em;
}
.sidebar .active {
  font-weight: 700;
  color: #333;
  display: block;
  border-right: 4px solid #ddd;
}
.searchbox {
  margin: 20px 0 15px;
}
.logo {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
}
.name {
  font-size: 2em;
  font-weight: 700;
  margin-left: -70px;
  line-height: 1.2em;
}
.name,
.tagline {
  font-family: Averia Sans Libre, Arial, freesans, clean, sans-serif;
  padding-left: 50%;
}
.tagline {
  font-size: 0.8em;
  margin-left: -30px;
}
.cube {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: -50px 0;
  transform-origin: 50px 50px;
  transform: rotateX(-33.5deg) rotateY(45deg);
  transform-style: preserve-3d;
  animation: slowspin 10s ease-in-out infinite 2s;
  margin: -50px 0 0 -50px;
  top: 50%;
  left: 50%;
}
.cube,
.cube li {
  position: absolute;
  display: block;
}
.cube li {
  width: 75pt;
  height: 75pt;
  transition: transform 1s ease-in-out;
}
.cube .back,
.cube .front,
.cube .left,
.cube .right,
.cube .top {
  background: radial-gradient(transparent 30%, rgba(16, 47, 91, 0.2) 100%);
}
.cube li:after {
  content: "";
  display: block;
  position: absolute;
  width: 75pt;
  height: 75pt;
  backface-visibility: hidden;
  background-color: rgba(126, 169, 232, 0.5);
  transition: transform 1s ease-in-out;
}
.cube .front {
  transform: translateZ(50px);
}
.cube .back {
  transform: rotateX(-180deg) translateZ(50px);
}
.cube .right {
  transform: rotateY(90deg) translateZ(50px);
}
.cube .left {
  transform: rotateY(-90deg) translateZ(50px);
}
.cube .top {
  transform: rotateX(90deg) translateZ(50px);
}
.cube .top:after {
  background-color: rgba(152, 186, 237, 0.5);
}
.cube .bottom {
  transform: rotateX(-90deg) translateZ(50px);
}
.cube .floor:after {
  display: none;
}
.cube .floor {
  box-shadow: -300px 0 50px rgba(0, 0, 0, 0.3);
  backface-visibility: visible;
  width: 110px;
  height: 110px;
  left: 295px;
  background-color: transparent;
  transform: rotateX(-90deg) translateZ(60px);
}
.cube-inner {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: -25px 0;
  top: 50%;
  left: 50%;
  transform-origin: 25px 25px;
  margin: -25px 0 0 -25px;
  transform: rotateX(-33.5deg) rotateY(45deg);
  transform-style: preserve-3d;
  animation: fastspin 10s ease-in-out infinite 2s;
}
.cube-inner,
.cube-inner li {
  position: absolute;
  display: block;
}
.cube-inner li {
  width: 50px;
  height: 50px;
  transition: transform 1s ease-in-out;
}
.cube-inner .back,
.cube-inner .front,
.cube-inner .left,
.cube-inner .right,
.cube-inner .top {
  background: radial-gradient(transparent 30%, rgba(5, 17, 53, 0.2) 100%);
}
.cube-inner li:after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  backface-visibility: hidden;
  background-color: rgba(16, 58, 177, 0.5);
  transition: transform 1s ease-in-out;
}
.cube-inner .front {
  transform: translateZ(25px);
}
.cube-inner .back {
  transform: rotateX(-180deg) translateZ(25px);
}
.cube-inner .right {
  transform: rotateY(90deg) translateZ(25px);
}
.cube-inner .left {
  transform: rotateY(-90deg) translateZ(25px);
}
.cube-inner .top {
  transform: rotateX(90deg) translateZ(25px);
}
.cube-inner .top:after {
  background-color: rgba(22, 78, 234, 0.5);
}
.cube-inner .bottom {
  transform: rotateX(-90deg) translateZ(25px);
}
.cube-inner .floor:after {
  display: none;
}
.cube-inner .floor {
  box-shadow: -300px 0 50px rgba(0, 0, 0, 0.3);
  backface-visibility: visible;
  width: 60px;
  height: 60px;
  left: 295px;
  background-color: transparent;
  transform: rotateX(-90deg) translateZ(35px);
}
.deprecation {
  border: 1px solid red;
  padding: 2em;
  font-size: 1.2em;
  font-weight: 400;
  margin-bottom: 1em;
}
.intro {
  margin: 30px 0 50px;
  font-size: 1.5em;
  text-align: center;
}
.intro strong {
  font-family: Averia Sans Libre, Arial, freesans, clean, sans-serif;
}
.intro .types {
  display: inline-block;
  position: relative;
  top: 51px;
  padding: 0 5px;
  margin: 0;
}
.intro .types li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature {
  border: 2px solid #ccc;
  background: #f5f5f5;
  padding: 5px;
  margin: 10px;
}
</style>